<template>
    <div class="boxs">
        <a-tabs v-model:activeKey="activeKey" type="card" :destroyInactiveTabPane="true">
            <a-tab-pane key="static" tab="下单统计">

                <div style="background-color: #ececec; padding: 20px;font-size: 25px;" v-if="maxData.length > 0">
                    <a-row :gutter="16">
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">今日最高</span>
                                </template>
                                <p class="p">
                                    {{ maxData.sort((a, b) => b['today_total_amount'] - a['today_total_amount'])[0].nickname
                                        +
                                        ":" }}
                                    <span class="num">{{
                                        maxData.sort((a, b) => a['today_total_amount'] -
                                            b['today_total_amount'])[0]['today_total_amount']
                                    }}</span>
                                </p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">昨日最高</span>
                                </template>
                                <p class="p">
                                    {{
                                        maxData.sort((a, b) => b['yesterday_total_amount'] -
                                            a['yesterday_total_amount'])[0].nickname
                                        + ":" }}
                                    <span class="num">{{
                                        maxData.sort((a, b) => b['yesterday_total_amount'] -
                                            a['yesterday_total_amount'])[0]['yesterday_total_amount']
                                    }}</span>
                                </p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">本月最高</span>
                                </template>
                                <p class="p">
                                    {{
                                        maxData.sort((a, b) => b['this_month_total_amount'] -
                                            a['this_month_total_amount'])[0].nickname
                                        + ":" }}
                                    <span class="num">{{
                                        maxData.sort((a, b) => b['this_month_total_amount'] -
                                            a['this_month_total_amount'])[0]['this_month_total_amount']
                                    }}</span>
                                </p>

                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">上月最高</span>
                                </template>
                                <p class="p">
                                    {{
                                        maxData.sort((a, b) => b['last_month_total_amount'] -
                                            a['last_month_total_amount'])[0].nickname
                                        + ":" }}
                                    <span class="num">{{
                                        maxData.sort((a, b) => b['last_month_total_amount'] -
                                            a['last_month_total_amount'])[0]['last_month_total_amount']
                                    }}</span>
                                </p>

                            </a-card>
                        </a-col>
                    </a-row>
                </div>
                <div v-else>暂无数据</div>
            </a-tab-pane>
            <a-tab-pane key="biao" tab="用户统计">
                <div style='margin-bottom: 20px;'>
                    <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                        @finish="onFinish">
                        <a-row :gutter="24">
                            <a-col :span="4">
                                <a-form-item name="nickname" label="名称">
                                    <a-input v-model:value="formState[`nickname`]" :placeholder="'请输入'"></a-input>
                                </a-form-item>

                            </a-col>
                            <a-col :span="4">
                                <a-form-item name="phone" label="手机号">
                                    <a-input v-model:value="formState[`phone`]" :placeholder="'请输入'"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item name="superior" label="上级代理">
                                    <a-input v-model:value="formState[`superior`]" :placeholder="'请输入'"></a-input>
                                </a-form-item>
                            </a-col>

                            <a-col :span="4">
                                <a-form-item name="account_status" label="冻结">
                                    <a-radio-group v-model:value="formState['account_status']">
                                        <a-radio-button value="">全部</a-radio-button>
                                        <a-radio-button value="1">冻结</a-radio-button>
                                        <a-radio-button value="0">正常</a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>

                        </a-row>
                        <a-row>
                            <a-col :span="24" style="text-align: right">
                                <a-button type="primary" html-type="submit">查询</a-button>
                                <a-button style="margin: 0 8px"
                                    @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>

                            </a-col>
                        </a-row>
                    </a-form>
                    <a-table bordered :data-source="dataSource" :columns="columns"
                        :pagination="{ current, pageSize, total: totalCount }" @change="pageClick">

                        <template #bodyCell="{ column, text, record }">

                            <template v-if="column.dataIndex == 'account_status'">
                                <span :style="{ color: record.account_status == 1 ? 'skyblue' : 'green' }">{{
                                    record.account_status
                                    == 1 ?
                                    '冻结' : "正常" }}</span>
                            </template>


                            <template v-if="column.dataIndex === 'operation'">
                                <a-popconfirm :title="record.account_status != 0 ? '真的要解除冻结吗?' : '确定要冻结吗'"
                                    @confirm="record.account_status == 0 ? dj(record) : jd(record)">
                                    <a :style="{ color: share.color, marginLeft: '15px' }">{{ record.account_status == 0
                                        ? "冻结" : "解冻"
                                    }}</a>

                                </a-popconfirm>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="showModal(record.uid)">详情</span>

                            </template>

                        </template>
                    </a-table>
                </div>
            </a-tab-pane>
        </a-tabs>
        <a-modal v-model:visible="visible" title="客户详情" :width="1170" @cancel="handleCancel"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="handleCancel">确定</a-button>
            </template>
            <div class="box">
                <div class="name">
                    <p style="font-size: 24px;color: #333;">
                        {{ userData.data.nickname }}
                    </p>
                    <p></p>
                    <p>
                        <span class="title">IP:</span>
                        <span class="value">{{ userData.data.user_ip }}</span>
                    </p>
                    <p>
                        <span class="title">客户UID:</span>
                        <span class="value">{{ userData.data.uid }}</span>
                    </p>
                    <p>
                        <span class="title">联系电话:</span>
                        <span class="value">{{ userData.data.phone }}</span>
                    </p>
                    <p>
                        <span class="title">注册时间:</span>
                        <span class="value">{{ userData.data.register_date }}</span>
                    </p>
                    <p>
                        <span class="title">最后登录时间:</span>
                        <span class="value">{{ userData.data.lastLogin_date }}</span>
                    </p>
                </div>
                <div class="status" v-if="userData.data.account_status == 1">
                    <p style="color: skyblue;font-size: 18px;">账号已冻结</p>
                    <p></p>
                    <p>
                        <span class="title">操作人:</span>
                        <span class="value">{{ userData.data.operator }}</span>
                    </p>
                    <p>
                        <span class="title">冻结时间:</span>
                        <span class="value">{{ userData.data.freeze }}</span>
                    </p>
                    <p>
                        <span class="title">冻结原因:</span>
                    </p>
                    <textarea rows="3">{{ userData.data.reason }}</textarea>
                </div>
            </div>
            <div class="fuwu">
                <p style="font-size: 18px;color: #333;margin-top: 60px;">服务地址</p>
                <a-table :columns="UserColumn" :data-source="userData.ress"
                    :pagination="{ pageSize: userData.ress?.length }" :scroll="{ y: 200 }">
                    <template #headerCell="{ column }">
                        <template v-if="column.key === 'add_default'">
                            <div style="display: flex;">
                                <div style="width: 14px;height: 14px;background-color: #78FF9E ;"></div>
                                <span style="line-height: 14px;">是否默认</span>
                            </div>

                        </template>
                    </template>
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="column.dataIndex == 'add_default'">
                            <div style="display: flex;justify-content: center;margin-top: 20px;">
                                <div v-if="record.add_default == 1"
                                    style="background-color: #78FF9E ;width: 14px;height: 14px;"></div>
                                <div v-else="record.add_default==0"
                                    style="background-color: #FFCC68  ;width:14px;height:14px"></div>
                            </div>
                        </template>
                    </template>
                </a-table>
            </div>
            <div class="logs">
                <p style="font-size: 18px;color: #333;margin-top: 60px;">余额流水</p>
                <a-table :columns="logs" :data-source="userData.logs" :pagination="{ pageSize: userData.logs.length }"
                    :scroll="{ y: 200 }" :customRow="record => { return { onClick: () => handleRowClick(record) } }">
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="column.dataIndex == 'payment_type'">
                            <span v-if="record.payment_type == 0" style="color:#84D3FF ">支付</span>
                            <span v-if="record.payment_type == 1" style="color:#FF7967  ">退款</span>
                            <span v-if="record.payment_type == 2" style="color:#FFC24D ">充值</span>
                            <span v-if="record.payment_type == 3" style="color:#5DFE8A  ">提现</span>
                        </template>
                    </template>
                </a-table>
            </div>
        </a-modal>
        <!-- 技师冻结 -->
        <a-modal v-model:visible="djModal" title="技师冻结原因" :width="400"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="djOK">确定</a-button>
            </template>
            <textarea v-model="djData" :rows="5" :cols="50"></textarea>
        </a-modal>
        <!-- 用户充值 -->
        <a-modal v-model:visible="shows" title="客户充值" :width="802" @cancel="showCancel"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="showCancel">确定</a-button>
            </template>
            <div class="cz">
                <p style="font-size: 24px;color: #333;">
                    {{ userData.data.nickname }}
                </p>
                <p></p>
                <p>
                    <span class="title">订单标题:</span>
                    <span class="value">{{ czData.subject }}</span>
                </p>
                <p>
                    <span class="title">充值金额(元):</span>
                    <span class="value" style="color:#333">{{ czData.total_amount }}</span>
                </p>
                <p>
                    <span class="title">交易单号:</span>
                    <span class="value" style="color:#333">{{ czData.trade_no }}</span>
                </p>
                <p>
                    <span class="title">联系电话:</span>
                    <span class="value">{{ userData.data.phone }}</span>
                </p>
                <p>
                    <span class="title">创建日期:</span>
                    <span class="value">{{ czData.gmt_create }}</span>
                </p>
                <p>
                    <span class="title">付款日期:</span>
                    <span class="value">{{ czData.gmt_payment }}</span>
                </p>
                <p>
                    <span class="title">支付方式:</span>
                    <span class="value" v-if="czData.provider == 'alipay'" style="color:#5BC4FF">支付宝</span>
                    <span class="value" v-if="czData.provider == 'wxpay'" style="color: #5DFE8A;">微信</span>
                </p>
                <p>
                    <span class="title">交易状态:</span>
                    <span class="value" :style="{ color: czData.trade_status == 'TRADE_SUCCESS' ? '#36F36B' : '#FF7967' }">{{
                        czData.trade_status == 'TRADE_SUCCESS' ? "成功" : '失败' }}</span>
                </p>
                <p>
                    <span class="title">支付充值账户:</span>
                    <span class="value" style="color:#333">{{ czData.buyer_logon_id }}</span>
                </p>
                <p>
                    <span class="title">商家收款账户:</span>
                    <span class="value" style="color:#333">{{ czData.seller_email }}</span>
                </p>
            </div>
        </a-modal>
        <!-- 用户提现 -->
        <a-modal v-model:visible="TXShow" title="客户提现" :width="802" @cancel="TXCancel"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="TXCancel">确定</a-button>
            </template>
            <div class="cz">
                <p style="font-size: 24px;color: #333;">
                    {{ userData.data.nickname }}
                </p>
                <p></p>
                <p>
                    <span class="title">提现金额(元):</span>
                    <span class="value" style="color:#333">{{ txData.withdrawal_amount }}</span>
                </p>
                <p>
                    <span class="title">提现银行:</span>
                    <span class="value" style="color:#333">{{ txData.bank_name }}</span>
                </p>
                <p>
                    <span class="title">联系电话:</span>
                    <span class="value">{{ userData.data.phone }}</span>
                </p>
                <p>
                    <span class="title">提现日期:</span>
                    <span class="value">{{ txData.date_time }}</span>
                </p>
                <p>
                    <span class="title">开户行:</span>
                    <span class="value">{{ txData.bank }}</span>
                </p>
                <p>
                    <span class="title">银行卡号:</span>
                    <span class="value">{{ txData.card }}</span>
                </p>
                <p>
                    <span class="title">户名:</span>
                    <span class="value">{{ txData.account_name }}</span>
                </p>
                <p>
                    <span class="title">提现状态:</span>
                    <span class="value" v-if="txData.examine == 0" style="color:#FABA3F">待审批</span>
                    <span class="value" v-if="txData.examine == 1" style="color:#36F36B">审批通过</span>
                    <span class="value" v-if="txData.examine == 2" style="color:#FF7967">审批未通过</span>
                </p>
                <p v-if="txData.examine > 0">
                    <span class="title">审批人员:</span>
                    <span class="value">{{ txData.roved_by }}</span>
                </p>
                <p v-if="txData.examine > 0">
                    <span class="title">审批日期:</span>
                    <span class="value">{{ txData.examine_date }}</span>
                </p>
                <p v-if="txData.examine == 2">
                    <span class="title">不通过原因:</span>
                </p>
                <textarea v-if="txData.examine == 2" cols="70" rows="3">{{ txData.reason }}</textarea>
            </div>
        </a-modal>

    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { useUserData } from '../../../stores/userData';
import { userDataAPI, logsAPI } from '../../../api/management'
import { message } from 'ant-design-vue';
import { debounce } from 'lodash'

const router = useRouter();  //路由
const store = useUserData();    //pinia
const activeKey = ref('static');  //分页栏选择值
const maxData = ref([]);        //下单统计最大
const formRef = ref('');        //用户查询表的ref
const dataSource = ref([{}]);   //用户表格信息
const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页
const visible = ref(false)   //用户详情弹窗
const shows = ref(false);  //用户充值窗口
const czData = ref({})    //用户充值数据
const txData = ref({})   //用户提现数据
const TXShow = ref(false);  //用户提现窗口
const userData = reactive({  //用户详细信息
    ress: [],
    logs: [],
    data: []
})
const columns = [{  //用户表格数据
    title: '用户名称',
    dataIndex: 'nickname',
    align: 'center'


}, {
    title: '手机号',
    dataIndex: 'phone',
    align: 'center'

}, {
    title: '注册时间',
    dataIndex: 'register_date',
    align: 'center'

}, {
    title: "登录ip",
    dataIndex: 'user_ip',
    align: 'center'

}, {
    title: '最后登录',
    dataIndex: 'lastLogin_date',
    align: 'center'

}, {
    title: "上级代理",
    dataIndex: "superior",
    align: 'center'

}, {
    title: "余额",
    dataIndex: "balance",
    align: 'center'

}, {
    title: "账户状态",
    dataIndex: "account_status",
    align: 'center'

}, {
    title: "标签",
    dataIndex: "label",
    align: 'center'

}, {
    title: '操作',
    dataIndex: 'operation',
    align: 'center'

}];

const djModal = ref(false);
const djData = ref('');
const djUid = ref('');
const dj = (item) => {
    djModal.value = true;
    djUid.value = item.uid;
}

const jd = async (item) => {   //点击解冻时
    let res = await userDataAPI(`jd|${item.uid}|${store.data.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        console.log(res);
        message.error(res.message);
        return
    }
    message.success(res.message);
    pageClick();
}

const djOK = async () => {    //点击冻结时
    let res = await userDataAPI(`dj|${djUid.value}|${djData.value}|${store.data.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        console.log(res);
        message.error(res.message);
        return
    }
    message.success(res.message)
    djModal.value = false;
    pageClick();
}


const UserColumn = [
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '地址uid',
        dataIndex: 'uid',
        key: 'uid',

    }, {
        title: '经度',
        dataIndex: 'longitude',
        key: 'longitude',

    }, {
        title: '纬度',
        dataIndex: 'latitude',
        key: 'latitude',

    }, {
        title: '详细地址',
        dataIndex: 'address',
        key: 'address',
        ellipsis: true,
        width: 150
    }, {
        title: '联系电话',
        dataIndex: 'phone',
        key: 'phone',

    },
    {
        title: '创建日期',
        dataIndex: 'create_date',
        key: 'create_date',
        width: 200
    },
    {
        title: "是否默认",
        dataIndex: "add_default",
        key: "add_default"
    }
];
const handleRowClick = async (item) => {
    let res;
    if (item.orderg_uid.startsWith("CZ")) {  //流水表为充值
        let res = await logsAPI(`userCZ|${item.uid}|${item.orderg_uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
        console.log(res);
        if (res.code == 406 || !res) {
            router.replace({ name: "login" });
            return
        } else if (res.code != 200) {
            message.error(res.message);
            return;
        }
        czData.value = res.data[0];
        shows.value = true;
    } else if (item.orderg_uid.startsWith("TX")) {  //流水表为提现
        let res = await logsAPI(`userTX|${item.uid}|${item.orderg_uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
        if (res.code == 406 || !res) {
            router.replace({ name: "login" });
            return
        } else if (res.code != 200) {
            console.log(res);
            message.error(res.message);
            return;
        }
        txData.value = res.data[0];

        TXShow.value = true;
    }



}


const logs = [
    {
        title: '发生时间',
        dataIndex: 'payment_date',
        key: 'payment_date',
    }, {
        title: '类型',
        dataIndex: 'payment_type',
        key: 'payment_type',
        width: 70

    }, {
        title: '订单号',
        dataIndex: 'orderg_uid',
        key: 'orderg_uid',
        width: 250

    }, {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',

    }, {
        title: '交易金额(元)',
        dataIndex: 'payment_amount',
        key: 'payment_amount',

    }, {
        title: '剩余金额（元）',
        dataIndex: 'payment_balance',
        key: 'payment_balance',

    }
];

const formState = reactive({  //用户列表查询的条件
    nickname: '',
    phone: "",
    superior: '',
    account_status: "",

});



const onFinish = () => {    //点击条件查询
    pageClick();
}

const debouncedPageClick = debounce(async (item) => {           //进行防抖
    item ? current.value = item.current : current.value = 1;
    let res = await userDataAPI(`sel|${pageSize.value}:${current.value}:${formState.account_status}:${formState.superior}:${formState.phone}:${formState.nickname}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (res.code == 406 || !res) {
        router.replace({ name: "login" });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return;
    }
    dataSource.value = res.data;
    totalCount.value = res.data.length > 0 ? res.data[0].total - 0 : 0;
}, 300);

const pageClick = (item) => {       //页面变化刷新表格
    debouncedPageClick(item);
};



const showModal = async (uid) => { //点击详情进行弹窗
    let res = await userDataAPI(`selectDan|${uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (res.code == 406 || !res) {
        message.error('账号失效')
        router.replace({ name: "login" });
        return
    } else if (res.code != 200) {
        message.error(res.message);
        return;
    }
    userData.data = res.data[0];
    userData.ress = res.ress;
    userData.logs = res.logs;
    visible.value = true;
    console.log(userData);

}
const handleCancel = () => {
    userData.ress = [];
    userData.logs = [];
    userData.data = [];
    visible.value = false;

}


//充值窗口
const showCancel = () => {
    czData.value = {};
    shows.value = false;
}


//提现窗口
const TXCancel = () => {
    txData.value = {};
    TXShow.value = false;
}


onMounted(async () => {
    let res = await userDataAPI(`stat|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    maxData.value = res.data;
    console.log(maxData.value);
    let res2 = await userDataAPI(`sel|${pageSize.value}:${current.value}::::|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    if (res.code == 406 || !res || !res2 || res2.code == 406) {
        router.replace({ name: "login" });
        return
    } else if (res.code != 200 || res2.code != 200) {
        message.error(res.message);
        return;
    }
    dataSource.value = res2.data;
    totalCount.value = res2.data.length > 0 ? res2.data[0].total - 0 : 0;
})

</script>


<style scoped src="../../css/management/users.scss" />
